<style scoped></style>
<template>
    <div>
        <el-input v-model="input" style="width: 240px" placeholder="输入爬取的岗位名称" clearable />
        <el-button type="primary" style="margin-left: 5px;" @click="crawlData">爬取</el-button>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { ElLoading, ElMessage } from 'element-plus'; // 引入加载和消息组件
import script from '../../apis/script.js';

const input = ref('');

const crawlData = async () => {
    // 检查输入框是否为空
    if (!input.value.trim()) {
        ElMessage.warning("输入框为空，请输入关键词"); // 弹出提示
        return; // 如果为空，直接返回，不执行后续代码
    }

    // 开始加载动画
    const loading = ElLoading.service({
        lock: true,
        text: '爬取中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.8)' // 可以调整背景颜色
    });

    try {
        // 调用爬取数据的接口
        const res = await script.crawlData(input.value);
        // 处理返回结果
        console.log(res);
        ElMessage.success("爬取成功！"); // 弹出成功提示
    } catch (error) {
        console.error("爬取数据时出错:", error);
        ElMessage.error("爬取失败，请重试！"); // 弹出失败提示
    } finally {
        // 关闭加载动画
        loading.close();
    }
};
</script>